<div id="playerButtons">
  <button
      ng-if="!playerButtons.playerService.state.enableSkip"
      ng-click="playerButtons.playerService.prev()"
      class="btn btn-link"
      title="{{'BROWSER.PREVIOUS_TRACK' | translate}}"
      ng-disabled="playerButtons.playerService.state.disableUi">
    <i class="fa fa-step-backward"></i>
  </button>
  <button
      ng-if="playerButtons.playerService.state.enableSkip"
      ng-click="playerButtons.playerService.skipBackwards()"
      class="btn btn-link"
      title="{{'BROWSER.SKIP_BACKWARDS' | translate}}"
      ng-disabled="playerButtons.playerService.state.disableUi">
    <i class="fa fa-backward"> 15</i>
  </button>

  <div class="playPauseBtnWrapper">
    <div class="playPauseBtnGreyWrapper">
      <button
          ng-if="playerButtons.playerService.state.status !== 'play' && !playerButtons.playerService.state.volatile"
          ng-click="playerButtons.playerService.play()"
          class="btn btn-link playPause play"
          title="{{'BROWSER.PLAY' | translate}}"
          ng-disabled="playerButtons.playerService.state.disableUi">
        <i class="fa fa-play"></i>
      </button>

      <button
          ng-if="playerButtons.playerService.state.status !== 'play' && playerButtons.playerService.state.volatile"
          ng-click="playerButtons.playerService.volatilePlay()"
          class="btn btn-link playPause play"
          title="{{'BROWSER.PLAY' | translate}}"
          ng-disabled="playerButtons.playerService.state.disableUi">
        <i class="fa fa-play"></i>
      </button>

      <button
          ng-if="playerButtons.playerService.state.status === 'play' && playerButtons.playerService.state.trackType !== 'webradio'"
          ng-click="playerButtons.playerService.pause()"
          class="btn btn-link playPause"
          ng-class="{active: playerButtons.playerService.state.status === 'play'}"
          title="{{'BROWSER.PAUSE' | translate}}"
          ng-disabled="playerButtons.playerService.state.disableUi">
        <i class="fa fa-pause"></i>
      </button>

      <button
          ng-if="playerButtons.playerService.state.status === 'play' && playerButtons.playerService.state.trackType === 'webradio'"
          ng-click="playerButtons.playerService.stop()"
          class="btn btn-link playPause"
          ng-class="{active: playerButtons.playerService.state.status === 'stop'}"
          ng-disabled="playerButtons.playerService.state.disableUi">
        <i class="fa fa-stop"></i>
      </button>
    </div>
  </div>
  <button
      ng-if="!playerButtons.playerService.state.enableSkip"
      ng-click="playerButtons.playerService.next()"
      class="btn btn-link"
      title="{{'BROWSER.NEXT_TRACK' | translate}}"
      ng-disabled="playerButtons.playerService.state.disableUi">
    <i class="fa fa-step-forward"></i>
  </button>
  <button
      ng-if="playerButtons.playerService.state.enableSkip"
      ng-click="playerButtons.playerService.skipForward()"
      class="btn btn-link"
      title="{{'BROWSER.SKIP_FORWARD' | translate}}"
      ng-disabled="playerButtons.playerService.state.disableUi">
    15 <i class="fa fa-forward"></i>
  </button>
</div>
